<template>
  <div class="el-container-h">
    <div :class="['mobile-content',{'mobile-content-404': displayComponent===null}]">
      <component :is="displayComponent" ref="content" @menuOpen="menuOpen" />
    </div>
    <div class="mobile-menu">
      <MenuTree
        v-for="(node, index) in menu"
        :key="index"
        :data="node"
        :expand="menuExpand===index"
        @click.native="menuExpand=index"
        @click="menuOpen"
      />
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import HomePage from '@view/mobile/MoblieHome.vue'
import ItemGroup from '@components/ItemGroup.vue'
// test menu
import MenuTree from '@view/windows/MenuTree.vue'
// end test
import component from '@store/component.js'
const router = component.state.component
export default {
  name: 'Mobile',
  components: {
    ItemGroup,
    MenuTree,
    HomePage,
    ...router
  },
  data() {
    return {
      ...router,
      displayComponent: HomePage,
      menuExpand: null
    }
  },
  computed: {
    ...mapState({
      user: state => state.authentication.data,
      menu: state => state.menu
    })
  },
  methods: {
    refresh(event) {
      this.$refs.content.$emit('refresh', event)
    },
    menuOpen(item, event) {
      this.displayComponent = item &&
        item.info &&
        item.info.componentId &&
        item.info.componentId.trim()
        ? (this.$data[item.info.componentId.trim()] ? item.info.componentId.trim() : null)
        : (item.children ? event : null)
    }
  }
}
</script>
<style>
/* body {
  background-image: none;
} */
.app-frame {
  height: 100vh;
}
</style>
<style scoped>
.el-container-h {
  width: 100%;
  height: 100%;
  position: relative;
}
.mobile-content {
  width: 100%;
  height: calc(100% - 4rem);
  position: absolute;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  background: #fff;
}
.mobile-menu {
  width: 100%;
  position: fixed;
  z-index: 500;
  bottom: 0;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  flex-wrap: nowrap;
  background-color: #01a5a4;
  border-top: solid 1px #ccc;
}
.mobile-menu>div {
  max-width: 16.6%;
}
.mobile-menu>div> /deep/ .tree-node {
  height: 4rem;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  color: #fff;
}
.mobile-menu>div> /deep/ .tree-node .tree-node-text {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  line-height: 2rem;
}
.mobile-menu>div> /deep/ .tree-node .fa {
  display: none;
}
.mobile-menu>div> /deep/ .tree-node-child {
  width: 100%;
  position: absolute;
  bottom: 4rem;
  left: 0;
  padding: 0;
  background-color: #49c3c4;
  border-top: solid 1px #ccc;
}
.mobile-menu>div> /deep/ .tree-node-child .tree-node-icon {
  line-height:2rem;
}
</style>
